<template>
  <div>
    <button @click="testGet">get</button>
    <button @click="testPost">post</button>
    <button @click="testPut">put</button>
    <button @click="testDel">delete</button>
    <button @click="testConfig">配置config</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    //从服务器获取数据
    testGet() {
      // 点击testget按钮发送ajax  axios携带参数 ，axios.get()的第二个参数 对象
      axios
        .get("http://localhost:3000/posts", {
          params: {
            author: "peiqi"
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //post请求 向服务器添加数据
    testPost() {
      axios
        .post("http://localhost:3000/posts", {
          title: "托尼老师",
          author: "张鹏飞"
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // put请求 更新服务器已有数据
    testPut() {
      axios
        .put("http://localhost:3000/posts/8", {
          title: "跆拳道教练",
          author: "张栋"
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    testDel() {
      axios
        .delete("http://localhost:3000/posts/6")
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    testConfig() {
      axios({
        method: "get",
        url: "http://localhost:3000/posts"
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

  watch: {}
};
/*
接口API分类
接口
① reset 接口
发送请求CRUD请求方式决定
同一个路径可以做多个操作
请求方式 get post put delete
②非reset接口
发送请求方式不能决定CRUD操作
一个路径只能对应一个操作
一般只是使用get post

get 从服务器请求数据
post 向服务器添加数据
put 更新服务器已有数据
delete 删除服务器数据



*/
</script>
<style lang="" scoped></style>
